<template>
  <div class="lc_wrap">
    <el-row class="abnormal swaqAbnormal">
      <el-col :span="leftWidth">
        <div class="box treeBox">
          <basic-container>
            <lcTree @ready="ready" :deviceType='systemInfo.treeType'></lcTree>
          </basic-container>
        </div>
      </el-col>
      <el-col :span="rightWidth" class="table-wrapper">
        <overlay @changeTreeBox="changeTreeBox"></overlay>
        <basic-container>
          <el-form :inline="true" class="demo-form-inline" size="small">
            <el-form-item label="化验时间">
              <el-date-picker style="width: 150px;" v-model="query.start" type="date" size="small" placeholder="开始日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
              </el-date-picker>
              &nbsp;至&nbsp;
              <el-date-picker style="width: 150px;" v-model="query.end" type="date" size="small" placeholder="结束日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
              </el-date-picker>
              &nbsp;&nbsp;
            </el-form-item>

            <el-form-item label="样品编号">
              <el-input placeholder="请输入内容" v-model="query.sampleNum"></el-input>
            </el-form-item>

            <el-form-item label="采样方式">
              <el-select size="small" v-model="query.samplingMethods" style="width: 150px;">
                <el-option v-for="(item, index) in samplingMethods" :key="index" :label="item.id" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-select size="small" v-model="query.auditStatus	" style="width: 150px;">
                <el-option v-for="(item, index) in auditStatus	" :key="index" :label="item.value" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <!--搜索按钮-->
            <el-form-item label="" style="margin-left: 10px;">
              <el-button @click="searchBtn()" icon="el-icon-search" size="small" type="primary">搜 索</el-button>
              <el-button type="" size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
            </el-form-item>
          </el-form>

          <avue-crud
            ref="crud"
            class="pubilc_tabel_wrap"
            v-model="form"
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            @refresh-change="refreshChange"
            @search-change="searchChange"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @search-reset="searchReset">
            <template slot="menuLeft">
              <el-button :disabled="allCheckId.length === 0" @click="check(allCheckId,allCheckData,1)"
                icon="el-icon-s-tools" plain size="small" type="primary" v-if="permission.psoa32_analysis_check_checksample"
              >批量审查</el-button>
            </template>
            <template slot="menu" slot-scope="scope">
              <el-button @click="check(scope.row.id, scope.row,0)" icon="el-icon-s-tools" size="small" type="text">审查</el-button>
            </template>
            <template slot="nextStatus" slot-scope="scope">
              <el-tag size="small" type="warning" v-if="scope.row.nextStatus===2">初次提交</el-tag>
              <el-tag type="success" v-else size="small">重新提交</el-tag>
            </template>
            <template :slot="item.factorCode" slot-scope="scope" v-for="(item,index) in factorList">
              <div v-if="scope.row[item.factorCode+'isAbnormal']==1" style="color: red;">
                {{ scope.row[item.factorCode] }}
              </div>
              <div v-else>{{ scope.row[item.factorCode] }}</div>
            </template>
          </avue-crud>
<!--          //审查单-->
          <el-dialog v-if="checkDialogShow" :append-to-body="true" :visible.sync="checkDialogShow" center class=" Dialog_title" width="50%">
            <template  slot="title">
              <div style="font-size: 18px;text-align: left" >审查单</div>
            </template>
            <el-divider></el-divider>
            <avue-form ref="form"  :option="checkFormOption" :upload-after="uploadAfter" :upload-before="beforeUpload" :upload-delete="uploadDelete" :upload-exceed="uploadExceed" @reset-change="emptytChange" @submit="checkReport" v-model="checkQuery">
              <template slot="menuForm" slot-scope="scope">
                <el-button @click="checkDialogShow = false" icon="el-icon-close" >取消</el-button>
              </template>
              <template slot="crud">
                <avue-crud
                  :data="checkFormData"
                  :option="optionCheck"
                  :table-loading="loading"
                  @current-change="currentChange"
                  @refresh-change="refreshChange"
                  @search-change="searchChange"
                  @search-reset="searchReset"
                  @selection-change="selectionChange"
                  @size-change="sizeChange"
                  class="checkRep-crud-class"
                  ref="crud"
                  v-model="form">

                  <template slot="menu" slot-scope="scope">
                    <el-button :disabled="scope.row.nextStatus===2" @click="checkDetail(scope.row.id)"  size="small" type="text">查看</el-button>
                  </template>
                  <template :slot="item.factorCode" slot-scope="scope" v-for="(item,index) in factorList">
                    <div style="color: red;" v-if="scope.row[item.factorCode+'isAbnormal']==1">
                      {{ scope.row[item.factorCode] }}
                    </div>
                    <div v-else>{{ scope.row[item.factorCode] }}</div>
                  </template>
                </avue-crud>
              </template>
            </avue-form>
          </el-dialog>
<!--          //审查意见-->
          <el-dialog :append-to-body="true" :visible.sync="checkFormShow" class="Dialog_title" title="审查意见" width="40%">
            <el-divider></el-divider>
            <div class="block">
              <el-timeline>
                <el-timeline-item :key="index" :timestamp="checkDetailInf.auditTime" placement="top"  v-for="(item,index) in  checkDetailInf">
                  <el-card>
                    <div>{{item.reason}}</div>
                    <div>{{item.auditUserName}} 提交于 {{item.auditTime}}</div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-dialog>

        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {getFactorHead, getTestDealList} from "@/api/psoa32/analysis";
  import {headers} from "@/api/dust/personnel";
  import { getMethods,getUserld} from "@/api/psoa32/sample";
  import { getList, getCheckStatus ,submiTestAudit,getReportDetail} from "@/api/psoa32/check";
  import lcTree from "@/components/common/tree.vue";
  import overlay from "@/components/common/overlay.vue";
  import mixmin from '@/config/mixmin'
  import {columnCheckForm2,columnCheckForm3,checkResult,columnCheckForm} from "../sample/testdata"
  export default {
    components: {
      lcTree,
      overlay
    },
    data() {
      return {
        checkDialogShow: false,
        checkFormShow:false,
        fileList:[],
        headers:headers(),
        form: {},
        page:{},
        allCheckId:[],
        allCheckData:[],
        query: {
          sampleNum:'',
          end: '',
          auditStatus	: '0',
          start: '',
          samplingMethods: '0'
        },
        auditStatus:[],
        samplingMethods:[],
        loading: true,
        option: {
          addBtn: false,
          editBtn: false,
          delBtn: false,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          dialogClickModal: false,
          selection: true,
          menu: true,
          refreshBtn: true,
          columnBtn: true,
          column: columnCheckForm,
          menuWidth:100
        },
        data: [],
        //审查单
        checkView:'',
        optionCheck: {
          addBtn: false,
          editBtn: false,
          delBtn: false,
          tip: false,
          searchShow: false,
          searchMenuSpan: 6,
          border: true,
          index: false,
          dialogClickModal: false,
          selection: false,
          menu: true,
          refreshBtn: false,
          columnBtn: false,
          column: columnCheckForm,
          menuWidth:100
        },
        checkQuery:{
          checkPerson:'',
          checkResult:0,
          checkView:''
        },
        checkFormData:[],
        checkFormOption:{
          emptyBtn:false,
          column:[{
            label: '审查人',
            prop: 'checkPerson',
            type: "select",
            dicData:[],
            order:1,
            span:12,
            multiple:false,
            rules: [{
              required: true,
              message: "请选择审查人",
              trigger: "click"
            }]
          },{
            label: '审查结果',
            prop: 'checkResult',
            type: 'radio',
            border:true,
            size:"small",
            span:12,
            order:2,
            dicData:checkResult,
          }, {
            label: '审查意见',
            prop: 'checkView',
            type: 'textarea',
            // labelPosition:'top',
            span:24,
            minRows:5,
            rules: [{
              required: true,
              message: "不可为空",
              trigger: "blur"
            }],
          },{
            label: '附件上传',
            prop: 'fileUpload',
            type: 'upload',
            showFileList:true,
            name:"multipartFile",
            multiple:true,
            loadText: '附件上传中，请稍等',
            span: 24,
            display:false,
            propsHttp: {
              fileName: 'multipartFile',
              res: 'data'
            },
            action: '/api/squirrel-ficm/file/upload',
            // headers: headers(),
            uploadBefore:(file)=>{
              console.log("file",file);
            },
            uploadAfter:(res)=>{
              console.log("after",res);
            }
          },{
            labelPosition:'top',
            prop: 'crud',
            formslot:true,
            span:24
          }]
        },
        checkDetailInf:[],
        nodeId: null,
        deptInfoName: '',
        deptInfoId: '',
        treeType: null,
        factorList:null,
      }
    },
    mixins: [mixmin],
    watch:{
      'checkQuery.checkResult':{
        handler(val){
          let checkView = this.findObject(this.checkFormOption.column,'checkView')
          let fileUpload = this.findObject(this.checkFormOption.column,'fileUpload')
          if(val===0){
            checkView.label = "审查意见"
            fileUpload.display = false
          }else {
            //通过
            checkView.label = "处理措施"
            fileUpload.display = true
          }
        }
      }
    },
    mounted(){
      //获得状态
      getCheckStatus().then(res=>{
        this.auditStatus = res.data.data
      })
      //采样方式
      getMethods().then(res => {
        this.samplingMethods = res.data.data;
      })
      this.option.menu = this.vaildData(this.permission.psoa32_analysis_check_handle, false),
      // 表头处理
      getFactorHead().then(res=>{
        let column=[]
        column=column.concat(columnCheckForm)
        this.factorList=res.data.data // 储存因子列表
        res.data.data.forEach(item=>{
          let obj={
            label:`${item.alias}\n(${item.unit})`,
            prop:item.factorCode,
            align: 'center',
            minWidth:120,
            slot:true
          }
          column.push(obj)
        })
        column=column.concat(columnCheckForm2)
        this.optionCheck.column = column
        column=column.concat(columnCheckForm3)
        this.option.column=column
      })
    },
    methods: {
      beforeUpload(file){
        console.log("file",file);
        this.fileList.push(file.name)
      },
      uploadDelete(file, fileList) {
        console.log(file, fileList);
      },
      uploadExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },

      ready(data, treeData) {
        this.treeType = data.nodeType
        this.nodeId = data.key
        this.deptInfoName = data.title
        this.deptInfoId = data.id
        this.page.currentPage = 1
        this.onLoad()
      },
      //自定义搜索清空事件
      searchReset() {
        this.query = {
          end: '',
          auditStatus	: '0',
          start: '',
          samplingMethods: '0',
          sampleNum:''
        };
        this.page.currentPage = 1
        this.onLoad();
      },
      searchBtn() {
        this.page.currentPage = 1
        this.onLoad()
      },
      //批量选中时
      selectionChange(item){
        this.allCheckData = item
        this.allCheckId = item.map(function (i) {
          return i.id
        })
      },
      onLoad() {
        this.loading = true;
        let params = Object.assign({}, this.query, {
          current: this.page.currentPage,
          size: this.page.pageSize,
          treeType:this.treeType,
          treeId:this.deptInfoId
        })
        getList(params).then(res => {
          this.data = []
          let arr=res.data.data.records
          arr.forEach(item=>{
            // 数据匹配
            this.factorList.forEach(el => {
              item[el.factorCode] = '-'
              item[el.factorCode + 'isAbnormal'] = 0
            })
            item.factorList.forEach(el => {
              for(var x in item) {
                if(el.testFactorCode + 'isAbnormal' == x) {
                  item[el.testFactorCode + 'isAbnormal'] = el.isAbnormal
                }
              }
              item[el.testFactorCode] = el.testVal || '-'
            })
            this.data=arr
          })
          this.loading = false
          this.page.total =res.data.data.total
        })
      },
      //审查
      check(ids,data,ch){
        //ch===0 单个审查  ch===1 批量审查
        this.allCheckId = []
        this.checkFormData = []
        this.checkQuery = {
          checkPerson:'',
            checkResult:0,
            checkView:''
        }
        if(ch === 0 ){
          this.checkFormData.push(data)
          this.allCheckId.push(ids)
        }else {
          this.allCheckId = ids
          this.checkFormData = data
        }
        //收集人
        getUserld(this.deptInfoId,this.treeType).then(res=>{
          this.checkFormOption.column[0].dicData = []
          res.data.data.forEach(item=> {
            this.checkFormOption.column[0].dicData.push({
              label:item.name,
              value:item.id
            })
          })
        })
        this.checkDialogShow = true
      },
      checkDetail(id){
        this.checkFormShow = true
        getReportDetail(id).then(res=>{
          this.checkDetailInf = res.data.data.sampleAuditRecordList
        })
      },
      emptytChange(){
        this.checkQuery.checkResult = 0
        this.$message.success("已清空所填内容")
      },
      checkReport(){
        let params = {
          sampleCollectionIds:this.allCheckId,
          auditStatus:this.checkQuery.checkResult,
          auditUserId:this.checkQuery.checkPerson,
          reason:this.checkQuery.checkView,
          // attachmentFile:this.checkQuery.checkResult===0?"":"地址"
        }
        submiTestAudit(params).then(()=>{
          this.$message.success("操作成功")
          this.checkDialogShow = false
          this.checkQuery = {
            checkPerson:'',
            checkResult:0,
            checkView:''
          }
          this.onLoad()
        })

      }
    },
  };

</script>
<style lang="scss" scoped>
  .box {
    height: 100%;
    margin-bottom: 0;
  }

  .el-row {
    height: calc(100% - 20px);
  }

  .el-col {
    height: 100%;
    overflow: auto;
  }
</style>
<style>
  .checkRep-crud-class{
    margin-top: -40px;
    margin-bottom: -20px;
  }
</style>
